<template>
  <div class="summary">
    <yg-background
      :imgStyle="{
        width: '100%',
        height: '368px',
        objectFit: 'cover'
      }"
      :imgSrc="require('@/assets/images/img_bg02.png')"
    >
      <template #default>
        <div class="yg_background_box">
          <div class="title">归档</div>
          <div class="content" v-if="articleList && articleList?.length > 0">
            {{
              getDivideArticle(articleList) &&
              getDivideArticle(articleList)?.length > 0 &&
              getDivideArticle(articleList)[0].ym
            }}
          </div>
        </div>
      </template>
    </yg-background>
    <main class="main_box container">
      <!-- 左侧边栏 -->
      <aside class="aside_left hidden-xs">
        <yg-usercard />
        <yg-recommend class="visible-sm" style="margin-top: 12px" />
        <yg-tags class="visible-sm" style="margin-top: 12px" />
      </aside>
      <!-- 内容 -->
      <section class="main_content">
        <div class="info_box">
          <div class="item" v-for="item in getDivideArticle(this.articleList)" :key="item?.id">
            <div class="item_header">
              <div class="item_label" :style="{ backgroundColor: item?.color }">
                {{ item.ym }}
              </div>
            </div>
            <div class="item_body" v-for="a_item in item?.list" :key="a_item?.id">
              <div class="item_box" :style="{ borderLeftColor: item?.color }">
                <span class="before_spot"></span>
                <span class="afiter_spot" :style="{ borderColor: item?.color }"></span>
                <span class="label_day"> {{ a_item?.d }}日 </span>
                <div class="content" :style="{ backgroundColor: item?.color }">
                  <router-link :to="`/article/${a_item?.id}`">{{ a_item?.title }}</router-link>
                  <span :style="{ borderRightColor: item?.color }"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="item_header">
            <div class="item_label">hello world!</div>
          </div>
        </div>
      </section>
      <!-- 右侧边栏 -->
      <aside class="aside_right hidden-xs hidden-sm">
        <yg-recommend />
        <yg-tags style="margin-top: 12px" />
      </aside>
    </main>
    <yg-footer />
  </div>
</template>

<script>
import { randomColor } from '@/utils/YgHooks'
export default {
  name: 'Summary',
  components: {},
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: '文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1',
          cover: require('@/assets/images/img_cover01.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 1, title: 'Vue', backgroundColor: 'brown' },
            { id: 2, title: 'React', backgroundColor: 'orange' },
            { id: 3, title: 'Axios', backgroundColor: 'blue' },
            { id: 4, title: '正则', backgroundColor: 'purple' }
          ],
          created_at: '2021-12-23T10:45:21+08:00',
          updated_at: '2021-12-24T11:33:44+08:00',
          release_at: '2021-12-24T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 232,
          content: `
          <h1 style="text-align: justify;">H1标题1</h1>
          <p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p><p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <h2 style="text-align: justify;">H2标题2</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题3</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h1 style="text-align: justify;">标题</h1>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p>`
        },
        {
          id: 2,
          title: '协助数字新基建，协助数字经济',
          cover: require('@/assets/images/img_cover02.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [
            { id: 5, title: '拖拽', backgroundColor: 'blue' },
            { id: 6, title: '测', backgroundColor: 'red' },
            { id: 7, title: '试', backgroundColor: 'black' }
          ],
          created_at: '2021-12-26T10:45:21+08:00',
          updated_at: '2022-12-26T11:33:44+08:00',
          release_at: '2022-12-26T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 322,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 3,
          title: '文章标题3',
          cover: require('@/assets/images/img_cover03.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [{ id: 8, title: 'antd', backgroundColor: 'violet' }],
          created_at: '2022-02-07T10:45:21+08:00',
          updated_at: '2022-02-07T11:33:44+08:00',
          release_at: '2022-02-07T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 4,
          title: '文章标题4',
          cover: require('@/assets/images/img_cover04.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 9, title: '正则', backgroundColor: 'green' },
            { id: 10, title: '表达式', backgroundColor: 'teal' }
          ],
          created_at: '2022-05-07T10:45:21+08:00',
          updated_at: '2022-05-08T11:33:44+08:00',
          release_at: '2022-05-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 5,
          title: '文章标题5',
          cover: require('@/assets/images/img_cover05.png'),
          category_id: 3,
          category_info: { id: 3, title: '随心记', backgroundColor: 'pink' },
          tagsList: [{ id: 1, title: 'Vue', backgroundColor: 'brown' }],
          created_at: '2022-12-07T10:45:21+08:00',
          updated_at: '2022-12-08T11:33:44+08:00',
          release_at: '2022-12-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        }
      ]
    }
  },
  methods: {
    getDivideArticle(value) {
      let list = value
        .map((m) => {
          return {
            ym: this.$moment(m?.created_at).format('YYYY-MM'),
            y: this.$moment(m?.created_at).format('YYYY'),
            m: this.$moment(m?.created_at).format('MM'),
            d: this.$moment(m?.created_at).format('DD'),
            id: m.id,
            title: m.title,
            cover: m.cover,
            created_at: m.created_at
          }
        })
        .sort((x, y) => y.d - x.d)
        .sort((x, y) => y.m - x.m)
        .sort((x, y) => y.y - x.y)
      let list2 = [...Array.from(new Set(list.map((m) => m.ym)))]
      let list3 = []
      for (let i = 0; i < list2.length; i++) {
        for (let j = 0; j < list.length; j++) {
          if (list2[i] === list[j].ym) {
            if (list3.map((m) => m.ym).indexOf(list2[i]) === -1) {
              list3.push({
                ym: list2[i],
                color: randomColor(),
                list: [list[j]]
              })
            } else {
              list3[list3.map((m) => m.ym).indexOf(list2[i])].list.push(list[j])
            }
          }
        }
      }
      return list3
    }
  }
}
</script>

<style lang="scss" scoped>
.summary {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  & > .main_box {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 16px 0;
    min-width: 320px;
    & > .aside_left,
    & > .aside_right {
      display: flex;
      flex-direction: column;
      min-width: 220px;
      max-width: 220px;
    }
    & > .main_content {
      margin: 0 12px;
      width: 100%;
      overflow: hidden;
      & > .info_box {
        display: flex;
        flex-direction: column;
        padding: 24px;
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        & > .item {
          display: flex;
          flex-direction: column;
          user-select: none;
          cursor: default;
          & > .item_body {
            padding-left: 70px;
            & > .item_box {
              position: relative;
              padding: 18px 0 18px 24px;
              border-left: 4px solid darkseagreen;
              &:hover .afiter_spot {
                left: -8px;
                width: 12px;
                height: 12px;
                border-width: 4px;
              }
              & > .before_spot {
                position: absolute;
                top: 50%;
                left: -8px;
                display: block;
                width: 12px;
                height: 12px;
                background-color: #fff;
                border-radius: 50%;
                transform: translateY(-50%);
              }
              & > .afiter_spot {
                position: absolute;
                top: 50%;
                left: -6px;
                display: block;
                width: 8px;
                height: 8px;
                border: 2px solid darkseagreen;
                border-radius: 50%;
                transform: translateY(-50%);
                transition: all 200ms;
              }
              & > .label_day {
                position: absolute;
                left: -48px;
                top: 50%;
                font-size: 14px;
                font-weight: 400;
                color: #171717;
                line-height: 22px;
                transform: translateY(-50%);
              }
              & > .content {
                position: relative;
                padding: 8px 12px;
                max-width: 100%;
                width: max-content;
                background-color: darkseagreen;
                border-radius: 4px;
                user-select: text;
                text-align: justify;
                cursor: pointer;
                & > a {
                  font-size: 14px;
                  font-weight: 400;
                  color: #fff;
                  line-height: 22px;
                }
                & > span {
                  position: absolute;
                  top: 50%;
                  left: -15px;
                  display: block;
                  width: 0;
                  height: 0;
                  border: 8px solid transparent;
                  border-right-color: darkseagreen;
                  transform: translateY(-50%);
                }
              }
            }
          }
        }
        .item_header {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 140px;
          text-align: center;
          user-select: none;
          cursor: default;
          & > .item_label {
            padding: 6px 12px;
            background-color: rgb(54, 155, 152);
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            line-height: 16px;
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .main_box {
    margin: 0;
    padding: 0 !important;
    width: 100vw !important;
    & > .main_content {
      margin: 0 !important;
    }
  }
}
</style>
